<script setup>

import {
  getRoomByFloorId,
  addRoom,
  updateRoom,
  getRoomById,
  deleteRoomByid,
  getRoomAll
} from '@/api/system/park/room'
import {deleteBuliding} from "@/api/system/park/building";


export default {
  data() {
    return {
      h1Name: "",
      bulidingId: "",
      floorId: "",
      floorSerialnumber: "",
      queryParams: {},
      floorRoom: [],
      flagName: "",
      addUpdateBulidingForm: {
        id: "",
        floorSerialnumber: '',
        floorName: '',
        floorRoomnumber: '',
        floorBuildingid: ""
      },
      addBulidingShowDialogVisible: false,
      rules: {
        roomSerialnumber: [
          {required: true, message: '请输入楼层编号', trigger: 'blur'},
        ], roomName: [
          {required: true, message: '请输入楼层名称', trigger: 'blur'},
        ], roomAcreage: [
          {required: true, message: '请输入总房间数', trigger: 'blur'},
        ]
      }
    }
  },
  created() {
    this.queryMethods();
    let that = this;


    that.h1Name = that.$route.query.h1Name;
    that.floorSerialnumber = that.$route.query.floorSerialnumber;
    that.addUpdateBulidingForm.floorBuildingid = that.$route.query.floorId;
    that.bulidingId = that.$route.query.bulidingId;
    that.floorId = that.$route.query.floorId;
    that.queryParams.roomFloorid = that.$route.query.floorId;

    console.log("楼栋id：" + that.bulidingId)
    console.log("楼层Id：" + that.floorId)


    getRoomByFloorId(that.floorId).then(function (data) {
      that.floorRoom = data.data;
    })
  },
  methods: {
    //点击查询
    queryMethods() {
      let that = this;
      getRoomAll(this.queryParams).then(function (data) {
        that.floorRoom = data.data;
      })
    },
    //重置
    resetQuery() {
      this.queryParams = [];
      this.resetForm("queryParams");
      this.queryMethods();
    },
    addBulidingShow() {
      this.addUpdateBulidingForm = {}
      this.addUpdateBulidingForm.roomFloorid = this.floorId
      this.addBulidingShowDialogVisible = true;
    },
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.addUpdateBulidingForm.id == "" || this.addUpdateBulidingForm.id == undefined) {
              addRoom(that.addUpdateBulidingForm).then(function (data) {
                if (data.code == 200) {
                  that.$message.success("添加成功");
                } else {
                  that.$message.error("添加失败")
                }
                that.addBulidingShowDialogVisible = false;
                that.queryMethods();
              })
            } else {
              console.log(1111111111111111111111111111)
              updateRoom(that.addUpdateBulidingForm).then(function (data) {
                if (data.code == 200) {
                  that.$message.success("修改成功");
                } else {
                  that.$message.error("修改失败")
                }
                that.addBulidingShowDialogVisible = false;
                that.queryMethods();
              })
            }
          } else {
            return false;
          }
        }
      )
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
    ,
    updateFloorShow(id) {
      let that = this;
      that.addBulidingShowDialogVisible = true;
      getRoomById(id).then(function (data) {
        that.addUpdateBulidingForm = data.data;
        that.floorSerialnumber = that.addUpdateBulidingForm.floorSerialnumber;
      });
    }
    ,
    deleteBuliding(id) {
      let that = this;
      that.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRoomByid(id).then(function (data) {
          if (data.code == 200) {
            that.$message.success("删除成功");
          } else {
            that.$message.error("删除失败")
          }
          that.queryMethods();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
    ,
    tiaoRoom(id, name) {
      this.$router.push({path: "/room", query: {"floorId": id, "floorName": name}})
    }

  }
}
</script>

<template>
  <div class="app-container">

    <el-button class="el-icon-back" @click="()=>{
      this.$router.push({path:'/floor',query:{bulidingId:bulidingId,buildingName:h1Name}})}"
    >返回
    </el-button>
    <h1>{{ h1Name }}-{{ floorSerialnumber }}</h1>

    <el-form :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="房间编号">
        <el-input
          v-model="queryParams.roomSerialnumber"
          placeholder="请输入房间编号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="房间名称">
        <el-input
          v-model="queryParams.roomName"
          placeholder="请输入房间名称"
          clearable
          size="small"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryMethods()">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-top:30px;margin-bottom: 30px" icon="el-icon-plus" @click="addBulidingShow">
      添加
    </el-button>
    <div class="parent-flex">
      <div v-for="item in floorRoom" style="background-color:#f2f2f2;margin-bottom:20px ;margin-right: 20px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button style="font-size: 20px" type="text" @click="tiaoRoom(item.id,item.floorName)">
              {{ item.roomSerialnumber }}号
            </el-button>
            <i class="el-icon-menu" style="float: right"></i>
          </div>
          <p>房间编号: {{ item.roomSerialnumber }}</p>
          <p>面积: {{ item.roomAcreage }}</p>
          <p>
            <el-tooltip content="修改">
              <i class="el-icon-edit" style="float: left" @click="updateFloorShow(item.id)"></i>
            </el-tooltip>
            <el-tooltip content="删除">
              <i class="el-icon-delete" style="float: right" @click="deleteBuliding(item.id)"></i>
            </el-tooltip>
          </p>
        </el-card>
      </div>
    </div>
    <el-dialog
      title="添加房间"
      :visible.sync="addBulidingShowDialogVisible"
      width="30%">
      <el-form :inline="true" :model="addUpdateBulidingForm" :rules="rules" ref="addUpdateBulidingForm"
               class="demo-form-inline">
        <el-form-item label="房间编号" label-width="110px" prop="roomSerialnumber">
          <el-input v-model="addUpdateBulidingForm.roomSerialnumber" placeholder="请输入房间编号"></el-input>
        </el-form-item>
        <el-form-item label="房间名称" label-width="110px" prop="roomName">
          <el-input v-model="addUpdateBulidingForm.roomName" placeholder="请输入房间名称"></el-input>
        </el-form-item>
        <el-form-item label="房间面积" label-width="110px">
          <el-input v-model="addUpdateBulidingForm.roomAcreage" placeholder="请输入房间面积"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('addUpdateBulidingForm')">立即创建</el-button>
        <el-button @click="resetForm('addUpdateBulidingForm')">重置</el-button>
        <el-button @click="addBulidingShowDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.parent-flex {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}

.box-card {
  width: 300px;
  height: 210px;
}

</style>
